<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 通用选择器 */
    /* * {
        font-size: 30px;
    } */
    /* 更推荐的做法 */
    body, div,p,h2,span {
        margin: 0;
        padding: 0;
        font-size: 30px;
    }
    /* 简单选择器 */
    .box1{
        color: blue;
    }
    #home{
        color: red;
    }
    #home::selection{
        background-color: rgb(238, 234, 11);
    }
    /* 属性选择器 */
    [title]{
        color: blueviolet;
    }
    [title = div]{
        background: rgb(36, 5, 65);
    }
     /* 后代选择器 所有的后代 */
    .home span{
        color: skyblue;
        font-size: 40px;
    }
    /* .home 的子代的span元素设置 */
    .home > span{
        background-color: blueviolet;
    }
    /* 兄弟选择器一:相邻兄弟选择器
        口 使用符号 + 连接 */
    .box_1 + .content_1{
        color: red;
    }
    /* 兄弟选择器二:普遍兄弟选择器
        口 使用符号 + 连接 */
    .content_1 ~ div{
        color: red;
    }
    /* 交集选择器 */
    div.boxjj{
        color: brown;
    }
      /* 并集选择器 */
      /* .boxjj, .box1,.box2{
        color: brown;
    } */
</style>
<body>
    <!--  通用选择器 start  -->
    <div>div元素</div>
    <p>p元素</p>
    <div>
        <h2>h2元素</h2>
        <p>p元素2 <span>呵呵</span></p>
    </div>
    <!--  通用选择器 end  -->
  <!--  简单选择器 start  -->
  <div class="box1">div1元素</div>
  <div class="box2">div2元素</div>
  <div id="home">div3元素</div>

  <!--  简单选择器 end  -->
  <!--  属性选择器 start  -->
  <div class="box1">div1元素</div>
  <div title="div">div2元素</div>
  <p>pyuansu</p>
  <h2 title="h2">2EBE4943.png</h2>
  <!--  属性选择器 end  -->
  <!--  后代选择器 start  -->
  <div class="home">
    <span> home中的span</span>
    <div class="box">
        <span>home中div的span</span>
        </div>
        <div class="content">
            <div class="desc">
                <p>
                    <span>home中div的div的div的p的span</span>
                </p>
            </div>
        </div>
   </div>
  <!--  后代选择器 end  -->
    <!--  兄弟选择器 start  -->
    <div class="home1">
        <div class="box_1">嗨</div>
        <div class="content_1">黑</div>
        <div>哈</div>
        <div>嘻</div>
    </div>
    <!--  兄弟选择器 end  -->
    <!--  交集选择器 start  -->
        <div class="boxjj">divdivdiv</div>
        <p class="boxjj">ppppppp</p>
    <!--  交集选择器 end  -->


    <!-- 补充 -->
    <img src="./imgs/cssno.png" alt="" srcset="">
</body>
</html>